<template>
    <div>
      <div>
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
          <el-form-item label="课程名">
            <el-input v-model="formSearch.coursename" placeholder="请输入班级号"></el-input>
          </el-form-item>
          <el-form-item label="教师名">
            <el-input v-model="formSearch.teacher" placeholder="请输入专业名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchClick">查询</el-button>
            <el-button type="danger" @click="clearClick">清空</el-button>
            <el-button type="success" @click="addClick">添加课程</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
          <el-table-column
              prop="id"
              sortable
              label="课程名ID">
          </el-table-column>
          <el-table-column
              prop="coursename"
              sortable
              label="课程名">
          </el-table-column>
          <el-table-column
              prop="teacher"
              sortable
              label="教师名">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
          >
            <template slot-scope="scope" >
              <el-button type="primary" plain @click="updateClick(scope.row)">编辑</el-button>
              <el-button type="danger" plain @click="deleteClick(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            layout="prev, pager, next"
            :page-size="10"
            :current-page="pagenum"
            @current-change="pageChange"
            :total="total">
        </el-pagination>
      </div>

      <!--      添加-->
      <el-dialog title="添加班级"   :visible.sync="addFormVisible">
        <el-form :rules="rules" :model="addForm" label-position="right" ref="addForm" label-width="80px">
          <el-form-item label="课程名" prop="coursename">
            <el-input  v-model="addForm.coursename" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="教师名" prop="teacher">
            <el-input  v-model="addForm.teacher" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUserEvent">确 定</el-button>
        </div>
      </el-dialog>



      <!--        修改框-->
      <el-dialog title="编辑班级" :visible.sync="dialogFormVisible">
        <el-form ref="updateForm" :model="updateForm" :rules="rules" label-position="right" label-width="80px">
          <el-form-item label="ID" >
            <el-input v-model="updateForm.id" disabled autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="课程名" prop="coursename">
            <el-input  v-model="updateForm.coursename" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="教师名" prop="teacher">
            <el-input  v-model="updateForm.teacher" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateUserEvent">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import {addClass, addCourse, deleClass, deleCourse, editClass, editCourse, getCourse} from "@/request";

export default {
  name: "Course",
  data(){
    return {
      dialogFormVisible:false,
      addFormVisible:false,
      tableData:[],
      updateForm:{},
      total:0,
      pagenum:1,
      addForm:{
        coursename:null,
        teacher:null,
      },
      formSearch:{
        coursename:null,
        teacher:null,
      },
      rules: {
        coursename: [
          {required: true, message: '请输入课程名', trigger: 'blur'  },
          { min: 3, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
        ],
        teacher: [
          {required: true, message: '请输入教师姓名', trigger: 'blur'  },
          { min: 2, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getcourse()
  },
  methods:{
    async getcourse(){
      this.formSearch['pagenum']=this.pagenum;
      let data=await getCourse(this.formSearch);
      if(data.code!=200)return this.$message.error(data.message);
      this.tableData=data.data.list;
      this.total=data.data.total;
    },
    searchClick(){
      this.getcourse()
    },
    clearClick(){
      this.formSearch={
        coursename:null,
        teacher:null
      },
      this.getcourse()
    },
    addClick(){
      this.addFormVisible=true;
    },
    updateClick(item){
      this.dialogFormVisible=true;
      this.updateForm={
        coursename:item.coursename,
        teacher:item.teacher,
        id:item.id,
      };
    },
    addUserEvent(){
      let that=this;
      this.$refs['addForm'].validate(async (valid)=>{
        if(!valid){
          return false;
        }
        let data=await addCourse(that.addForm);
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('添加成功!');
        this.addFormVisible=false;
        this.getcourse();
        this.addForm={
          coursename:null,
          teacher:null
        }
      })
    },
    async updateUserEvent(){
      let data=await editCourse(this.updateForm);
      if(data.code!=200)return this.$message.error(data.message);
      this.$message.success(data.message);
      this.getcourse();
      this.dialogFormVisible=false;
    },
    deleteClick(id){
      this.$confirm('您将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data=await deleCourse({ids:[id]});
        if(data.code!=200)return this.$message.error(data.message);
        this.$message.success('删除成功!');
        this.getcourse();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    pageChange(val){
      this.pagenum=val
      this.getcourse();
    },
  }
}
</script>

<style scoped>

</style>